<template>
  <div class="app-page">
    <div class="my_top">
      <p class="shop_name">我家酸菜鱼</p>
      <p class="shop_address">大树下</p>
    </div>
    <div class="shop_info">
      <div class="info">
        <p>在线设备数</p>
        <p>
          <b>12</b>
        </p>
      </div>
      <div class="info">
        <p>设备总数</p>
        <p>
          <b>120</b>
        </p>
      </div>
      <div class="info">
        <p>设备在线率</p>
        <p>
          <b>12%</b>
        </p>
      </div>
    </div>
    <div class="shop_list">
      <ul>
        <li class="flex_wrapper" v-for="item in dataList">
          <div class="left">
            <p>ID：25345345345345</p>
            <p>推荐操作：
              <span class="debug red">立刻重启</span>
            </p>
          </div>
          <div class="right">
            <div class="show">
              <span class="offline">在线</span>
              <span class="battery" v-if="item.battery">
                <span v-if="item.battery!=9999" class="battery-bg" :class="{'red':item.battery<25, 'yellow':item.battery<50 && item.battery>=25,'green':item.battery>=50 && item.battery <=100}" :style="{width:item.battery/4.4+'px'}"></span>
                <span v-if="item.battery!=9999" class="battery-icon"></span>
                <span class="percent" v-if="item.battery">{{ item.battery==9999? '电池异常':item.battery +'%'}}</span>
              </span>
            </div>
            <div class="drrow">
              >
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>

export default {
  data() {
    return {
      dataList: [{ battery: 9999 }, { battery: 22 }, { battery: 100 }],
    };
  },
  methods: {
  },
  mounted() {
  },
};
</script>

<style lang="less">
@import (reference) "../style/less/app.less";
.my_top {
  padding: .6rem;
  background: #29B171;
  line-height: 1.2;
  font-size: 16px;
  >p {
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .shop_name {}
  .shop_address {
    font-size: 14px;
    color: #7ED9AE;
  }
}

.shop_info {
  display: flex;
  justify-content: flex-start;
  text-align: center;
  font-size: 14px;
  border-bottom: 1px solid #d1d1d1;
  .info {
    width: 33.3%;
    padding: .5rem 0;
    >p {
      padding: .2rem;
      >b {
        font-weight: bold;
        font-size: 20px;
      }
    }
  }
}

.shop_list {
  font-size: 14px;
  line-height: 1.8;
  .flex_wrapper {
    display: flex;
    padding: .6rem;
    border-bottom: 1px solid #d1d1d1;
    .left {
      width: 60%;
      >p {
        .debug {
          color: #3f6;
        }
        .debug.red {
          color: #f00;
        } //padding: .2rem 0;
      }
    }
    .right {
      width: 40%;
      text-align: right;
      .online {
        padding-left: .9rem;
        background: url('../../static/img/online.png') no-repeat left center;
        background-size: .8rem;
      }
      .offline {
        padding-left: .9rem;
        background: url('../../static/img/offline.png') no-repeat left center;
        background-size: .8rem;
      }
      .show>span {
        display: inline-block;
      }
      /*电池*/
      .battery {
        position: relative;
        top: 3px;
        .battery-bg {
          position: absolute;
          top: 3px;
          left: 2px;
          display: inline-block;
          height: 12px;
        }

        .battery-icon {
          display: inline-block;
          width: 28px;
          height: 16px;
          background: url('../../static/img/battery.png') no-repeat left center;
          background-size: 100% 100%;
        }

        .battery-bg.red {
          background: red;
        }

        .battery-bg.green {
          background: #38d853;
        }

        .battery-bg.yellow {
          background: yellow;
        }
        .percent {
          position: relative;
          top: -3px;
        }
      }
      .drrow {
        text-align: right;
      }
    }
  }
}
</style>
